<template>
  <!-- 催收执行页-历史信息模块-流转历史 -->
  <section class="component circulation-history">
    <!-- 搜索区域 -->
    <data-form :model="model" @onSearch="refreshData" ref="form">
      <template slot="inputs">
        <el-form-item label="触发动作" prop="triggerAction">
          <el-select v-model="model.triggerAction">
            <el-option
              :key="index"
              :label="name"
              :value="code"
              v-for="{ index, name, code } in $dict.getDictData(
                'TriggerAction'
              )"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作人" prop="operatorRealName">
          <el-input clearable v-model.trim="model.operatorRealName"></el-input>
        </el-form-item>
        <el-form-item label="流转时间" prop="caseTurnTime">
          <el-date-picker
            :editable="false"
            clearable
            placeholder="选择日期时间"
            type="datetimerange"
            v-model="model.caseTurnTime"
          ></el-date-picker>
        </el-form-item>
      </template>
    </data-form>
    <!-- 数据列区域 -->
    <data-box :data="dataSet" :page="pageService" @onPageChange="refreshData">
      <template slot="columns">
        <el-table-column
          :formatter="row => $filter.dateTimeFormat(row.caseTurnTime)"
          :min-width="$helper.getOperateWidth(2)"
          label="流转时间"
          prop="caseTurnTime"
        ></el-table-column>
        <el-table-column
          :formatter="
            row => $filter.dictConvert(row.triggerAction, 'TriggerAction')
          "
          :min-width="$helper.getOperateWidth(2)"
          label="触发动作"
          prop="triggerAction"
        ></el-table-column>
        <el-table-column
          :formatter="row => $filter.dictConvert(row.caseType, 'CaseType')"
          :min-width="$helper.getOperateWidth(2)"
          label="案件类型"
          prop="caseType"
        ></el-table-column>
        <el-table-column
          :formatter="
            row =>
              $common.isNotValue(row.overduePeriod)
                ? ''
                : `N${row.overduePeriod}`
          "
          :min-width="$helper.getOperateWidth(2)"
          label="逾期阶段"
          prop="overduePeriod"
        ></el-table-column>
        <el-table-column label="逾期天数" prop="overdueDays"></el-table-column>
        <el-table-column label="催收员" prop="name"></el-table-column>
        <el-table-column
          label="操作人"
          prop="operatorRealName"
        ></el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Prop, Watch } from "vue-property-decorator";
import { TurnRecordService } from "~/services/domain-service/turn-record.service";
import { PageService } from "~/utils/page.service";
import { namespace } from "vuex-class";
const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {}
})
export default class CirculationHistory extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(TurnRecordService) private turnRecordService: TurnRecordService;
  @CollectionExecutionModule.State private caseId;

  @CollectionExecutionModule.State private caseNo: string;

  private model: any = {
    caseTurnTime: [],
    triggerAction: "",
    operatorRealName: ""
  };

  private selected: any = {};
  private dataSet: any[] = [];

  @Watch("caseNo", { immediate: true })
  private onCaseNumberChange(val) {
    if (!val) return;
    this.refreshData();
  }

  private refreshData() {
    this.turnRecordService
      .findTurnRecordDetailPage(this.caseNo, this.model, this.pageService)
      .subscribe(data => (this.dataSet = data));
  }

  private activated() {
    this.refreshData();
  }
}
</script>

<style lang="less" scoped></style>
